<template>
  <div>
    <el-card>
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="部门名称">
          <el-input v-model="searchForm.dept_name" placeholder="请输入部门名称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getDepartmentList">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>

      <el-button type="primary" @click="openAddDialog" style="margin: 10px 0">新增部门</el-button>

      <el-table :data="departmentList" style="width: 100%">
        <el-table-column prop="dept_name" label="部门名称" />
        <el-table-column prop="leader" label="部门负责人" />
        <el-table-column prop="phone" label="联系电话" />
        <el-table-column prop="status" label="状态" :formatter="formatStatus" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" link size="small" @click="editDepartment(scope.row)">编辑</el-button>
            <el-button type="danger" link size="small" @click="deleteDepartment(scope.row.dept_id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
          v-model:current-page="pageNum"
          v-model:page-size="pageSize"
          :total="total"
          @current-change="getDepartmentList"
      />
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const searchForm = ref({ dept_name: '' })
const departmentList = ref([])
const pageNum = ref(1)
const pageSize = ref(10)
const total = ref(0)

function getDepartmentList() {
  console.log('查询部门列表', searchForm.value)
}

function resetSearch() {
  searchForm.value.dept_name = ''
  getDepartmentList()
}

function formatStatus(row) {
  return row.status === 1 ? '启用' : '停用'
}

function openAddDialog() {
  console.log('打开新增部门弹窗')
}

function editDepartment(row) {
  console.log('编辑部门', row)
}

function deleteDepartment(deptId) {
  console.log('删除部门', deptId)
}
</script>
